<template>
  <div class="index" id="index" style="height: 100vh; overflow: auto;" :class="dayu ? 'dayu' : ''">
    <!-- 加盟站点开始 -->
    <div
      v-if="all.join_switch && all.last_level == 0 && !user"
      style="position: fixed; right: 0; bottom: 2.8rem; z-index: 98; background: #fff; padding: 0.1rem; border-radius: 0.5rem 0 0 0.5rem; font-size: 0.28rem;"
      @click="go4('/jiameng')"
    >
      <div class="flexc">
        <div
          class="flexcc"
          style=" width: 0.6rem; margin-right: 0.1rem; height: 0.6rem; background: rgb(227, 232, 241); border-radius: 0.3rem;"
        >
          <img src="../../../static/img/jiameng11.png" style="width: 0.4rem;" />
        </div>
        <div>加盟站点</div>
      </div>
    </div>
    <!-- 加盟站点结束 -->

    <!-- 分销商登录的话 -->
    <footers v-if="user"></footers>
    <!-- <footers></footers> -->

    <!-- 分销商登录的话 -->

    <div style="width: 7.5rem; margin: 0px auto; padding-bottom: 0.8rem; ">
      <img
        src="../../../static/img/swicth_img.png"
        class="swicth_img"
        @click="switchClick"
        v-if="user"
      />

      <div style="position: relative; height: 5.1rem;">
        <img :src="all.top_pic" style="width: 7.5rem; height: 3rem;" />

        <div
          style="position: absolute; top: 1.3rem; left: 0.3rem; width: 6.9rem; padding:0.2rem 0.3rem; background: rgb(255, 255, 255); box-shadow: 0px 0.1rem 0.3rem 0px rgba(0, 0, 0, 0.05); border-radius: 0.3rem;"
        >
          <div class="flexbc">
            <div class="flexbc" style="padding-bottom: 0.2rem; width: 6.9rem;">
              <div class="flexc">
                <div style="position: relative;">
                  <img :src="all.left_pic" style="width: 0.9rem; height: 0.9rem;" />
                </div>
                <div class="flexc" style="width: 3.5rem;">
                  <div style="margin-left: 0.15rem;">
                    <div style="color: rgb(2, 12, 29); font-size: 0.3rem; ">{{ all.store_name }}</div>
                    <div v-if="all.store_slogan"
                      style="color: rgb(120, 125, 133); font-size: 0.22rem; width: 3.5rem; line-height: 0.3rem; height: 0.6rem; display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;"
                    >{{ all.store_slogan }}</div>
                  </div>
                </div>
              </div>
              <div style="position: relative;" v-if="all.right_radio">
                <img
                  :src="
                    all.right_pic || 'https://test91.91haoka.cn/shouye9.png'
                  "
                  style="width: 1.58rem; height: 0.76rem;"
                />
              </div>
            </div>
            <div style="height: 1px; width: 6.9rem; background: rgb(227, 232, 241); "></div>
            <div
              class="flex"
              style="justify-content: space-between; width: 6.9rem; padding-top: 0.4rem;"
            >
              <div style="flex: 1;" @click="go('/query')">
                <div class="flexcc">
                  <img
                    src="../../../static/img/shouye3.png"
                    style="width: 1rem; height: 1rem; margin-bottom: 0.1rem;"
                  />
                </div>
                <div class="flexcc" style="font-size: 0.24rem;">一键通查</div>
              </div>
              <div style="flex: 1;" @click="go('/query_order')">
                <div class="flexcc">
                  <img
                    src="../../../static/img/shouye6.png"
                    style="width: 1rem; height: 1rem; margin-bottom: 0.1rem;"
                  />
                </div>
                <div class="flexcc" style="font-size: 0.24rem;">订单查询</div>
              </div>

              <div style="flex: 1;" @click="show3 = true" v-if="all.img || all.cust_url">
                <div class="flexcc" style="position: relative;">
                  <img
                    src="../../../static/img/shouye5.png"
                    style="width: 1rem; height: 1rem; margin-bottom: 0.1rem;"
                  />
                </div>
                <div class="flexcc" style="font-size: 0.24rem;">联系客服</div>
              </div>

              <div style="flex: 1;" @click="showewm">
                <div class="flexcc">
                  <img
                    src="../../../static/img/shouye4.png"
                    style="width: 1rem; height: 1rem; margin-bottom: 0.1rem;"
                  />
                </div>
                <div class="flexcc" style="font-size: 0.24rem;">分享店铺</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- <div style="padding:0 0.3rem 0.3rem;">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item2 in all.pics" :key="item2.id">
            <img :src="item2.img" style="width: 100%; border-radius: 0.3rem;" @click="go3(item2.img_url)">
          </van-swipe-item>
        </van-swipe>
      </div>-->
      <div v-for="(itemx, indexx) in all.json" :key="indexx">
        <div
          class="flexcc"
          style="margin: 0px auto 20px; position: relative;  border-radius: 10.5px; width: 6.9rem;"
          v-if="itemx.type == 3"
        >
          <div
            style="background: rgb(220, 227, 238); border-radius: 10.5px; width: 6.9rem; overflow: hidden; "
            v-if="all.json.length > 0"
          >
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="(item2, index2) in itemx.list" :key="index2">
                <img :src="item2.img+'?imageView2/0/w/1000'" @click="go3(item2.img_url)" />
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>

        <div
          style="width: 6.9rem; font-size: 12px; margin: 0px auto 20px; border-radius: 10.5px; overflow: hidden;"
          class="flexcc"
          v-if="itemx.type == 1"
        >
          <div v-if="itemx.img">
            <img
              :src="itemx.img+'?imageView2/0/w/1000'"
              @click="go3(itemx.url)"
              style="width: 100%;"
            />
          </div>
        </div>

        <div
          style="width: 6.9rem; font-size: 12px; margin: 0px auto 20px;  border-radius: 10.5px;"
          class="flexcc"
          v-if="itemx.type == 2"
        >
          <div v-if="itemx.txt" style="width:100%;">{{ itemx.txt }}</div>
        </div>
      </div>

      <!-- <div class="flex nax" style=" white-space: nowrap;  flex-wrap: nowrap; overflow-x: scroll; padding:0 0.3rem; width: 100%;">
        <div class="flexcc" style="background: rgb(227, 232, 241); flex-shrink: 0; border-radius: 0.3rem; padding: 0 0.3rem; margin-right: 0.3rem; height: 0.6rem; font-size: 0.28rem;"
          @click="search(item.id)" :class="operator == item.id?'act':''" v-for="item in fenleilist" :key="item.id">
          {{item.name}}
        </div>
      </div>-->
      <!-- 直播也分类 -->
      <div
        class="flex"
        style="justify-content: space-around; padding:0 0.3rem;"
        v-if="$route.query.shops_id"
      >
        <div
          class="flexcc"
          style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;"
          @click="search('99999')"
          :class="operator == '' ? 'act' : ''"
        >全部</div>
        <div
          class="flexcc"
          style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;"
          @click="search('10086')"
          :class="operator == '10086' ? 'act' : ''"
        >移动</div>
        <div
          class="flexcc"
          style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;"
          @click="search('10010')"
          :class="operator == '10010' ? 'act' : ''"
        >联通</div>
        <div
          class="flexcc"
          style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;"
          @click="search('10000')"
          :class="operator == '10000' ? 'act' : ''"
        >电信</div>
        <div
          class="flexcc"
          style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;"
          @click="search('10099')"
          :class="operator == '10099' ? 'act' : ''"
        >广电</div>
      </div>

      <!-- 微小店分类 -->
      <van-tabs
        v-model:active="operator"
        swipe-threshold="2"
        @click="search()"
        v-if="!$route.query.shops_id"
        style="padding: 0 0.3rem;"
      >
        <van-tab v-for="item in fenleilist" :title="item.name" :name="item.id" :key="item.id"></van-tab>
      </van-tabs>

      <img :src="all.force_pic" style="margin: 20px auto; width: 6.9rem;" v-if="all.force_pic">

      <div
        class="flexc"
        style=" margin:0.3rem 0.3rem 0rem 0.3rem; height: 44px; background: #fff; border-radius: 0.3rem;"
        v-if="!$route.query.shops_id"
      >
        <div
          style="width: 1.5rem; font-size: 16px; text-align: center; border-right: 1px #ccc solid; overflow: hidden;"
          class="shengluehao"
          @click="dishilog = true"
        >
          {{hao_province}}
          <van-icon name="arrow-down" />
        </div>
        <div>
          <van-field v-model="title" style="width: 4.5rem;" round placeholder="请输入套餐名称、卖点" />
        </div>
        <div style="font-size: 16px; color: #005AFF; width: 0.9rem;" @click="search2()">搜索</div>
      </div>

      <div style="padding: 0.3rem;">
        <div
          style="background: rgb(255, 255, 255); box-shadow: 0px 0.1rem 0.3rem 0px rgba(0, 0, 0, 0.05); border-radius: 0.3rem; position: relative; padding: 0.2rem; margin-bottom: 0.3rem;"
          v-for="item in list"
          :key="item.id"
        >
          <div style="position: absolute; left: 0; top: 0;">
            <img
              src="../../../static/img/shouye7.png"
              style="width: 0.85rem; height: 0.85rem;"
              v-if="item.is_main"
            />
          </div>
          <div class="flex" @click="go2(item)">
            <div>
              <img
                :src="
                  item.image2 || 'https://91haoka.cn/gth/static/img/kenan.jpg'
                "
                style="width: 2rem; height: 2rem; margin-right: 0.2rem; border-radius: 0.1rem;"
              />
            </div>
            <div style="width: 4.3rem;">
              <div
                style="font-size: 0.26rem; margin-bottom: 0.2rem;"
                v-if="!item.sale_name"
              >{{ item.title }}</div>
              <div
                style="font-size: 0.26rem; margin-bottom: 0.2rem;"
                v-if="item.sale_name"
              >{{ item.sale_name }}</div>
              <div
                style="font-size: 0.18rem; color: rgb(254, 61, 61); margin-bottom: 0.2rem;"
              >{{ item.points }}</div>
              <div class="flexc">
                <div class="flexcc" style="width: 4.7rem; flex: 1;">
                  <div>
                    <div
                      style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;"
                      class="flexcc"
                    >
                      <span v-if="item.liuliang">{{ item.liuliang }}</span>
                      <span v-if="!item.liuliang">
                        <span v-if="item.liuliang === 0">0</span>
                        <span v-if="!item.liuliang === 0">--</span>
                      </span>
                      <span
                        style="font-size: 0.22rem; position: relative; top: 1px;"
                        v-if="item.liuliang || item.liuliang === 0"
                      >G</span>
                    </div>
                    <div style="color: rgb(120, 125, 133); font-size: 0.22rem;" class="flexc">通用流量</div>
                  </div>
                </div>
                <div style="width: 1px; height: 0.2rem; background: rgb(227, 232, 241);"></div>
                <div class="flexcc" style="width: 4.7rem; flex: 1;">
                  <div>
                    <!-- <div style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;" class="flexcc">{{item.dx_liuliang || '--'}}<span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="item.dx_liuliang">G</span></div> -->
                    <div
                      style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;"
                      class="flexcc"
                    >
                      <span v-if="item.dx_liuliang">
                        {{
                        item.dx_liuliang
                        }}
                      </span>
                      <span v-if="!item.dx_liuliang">
                        <span v-if="item.dx_liuliang === 0">0</span>
                        <span v-if="!item.dx_liuliang === 0">--</span>
                      </span>
                      <span
                        style="font-size: 0.22rem; position: relative; top: 1px;"
                        v-if="item.dx_liuliang || item.dx_liuliang === 0"
                      >G</span>
                    </div>
                    <div style="color: rgb(120, 125, 133); font-size: 0.22rem;" class="flexc">定向流量</div>
                  </div>
                </div>
                <div style="width: 1px; height: 0.2rem; background: rgb(227, 232, 241);"></div>
                <div class="flexcc" style="width: 4.7rem; flex: 1;">
                  <div>
                    <div
                      style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;"
                      class="flexcc"
                    >
                      <span v-if="item.yuyin">{{ item.yuyin }}</span>
                      <span v-if="!item.yuyin">
                        <span v-if="item.yuyin === 0">0</span>
                        <span v-if="!item.yuyin === 0">--</span>
                      </span>
                      <!-- <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="item.liuliang || item.liuliang === 0">G</span> -->
                      <span
                        style="font-size: 0.22rem; position: relative; top: 1px;"
                        v-if="
                          item.yuyin_type == 0 &&
                            (item.yuyin || item.yuyin === 0)
                        "
                      >分钟</span>
                      <span
                        style="font-size: 0.22rem; position: relative; top: 1px;"
                        v-if="item.yuyin_type == 1"
                      >元/分钟</span>
                    </div>

                    <!-- <div style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;" class="flexcc">{{item.yuyin || '--'}}
                      <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="item.yuyin_type == 0 && item.yuyin">分钟</span>
                      <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="item.yuyin_type == 1">元/分钟</span>
                    </div>-->
                    <div style="color: rgb(120, 125, 133); font-size: 0.22rem;" class="flexc">通话时长</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex" style="margin-top: 0.25rem;">
            <div
              style="background: rgb(255, 223, 223); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(254, 61, 61); margin-right: 0.2rem; margin-bottom: 0.2rem;"
              v-if="item.selling_point.length > 0 && item.selling_point[0]"
            >{{ item.selling_point[0] }}</div>
            <div
              style="background: rgb(223, 255, 228); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(8, 143, 26); margin-right: 0.2rem; margin-bottom: 0.2rem;"
              v-if="item.selling_point.length > 0 && item.selling_point[1]"
            >{{ item.selling_point[1] }}</div>
            <div
              style="background: rgb(233, 241, 255); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(0, 90, 255); margin-right: 0.2rem; margin-bottom: 0.2rem;"
              v-if="item.selling_point.length > 0 && item.selling_point[2]"
            >{{ item.selling_point[2] }}</div>
            <div
              style="background: rgb(246, 248, 251); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(120, 125, 133); margin-bottom: 0.2rem;"
              v-if="item.selling_point.length > 0 && item.selling_point[3]"
            >{{ item.selling_point[3] }}</div>
          </div>
          <div class="flexbc pattern">
  <!--          <div v-if="item.card_cost != '0.00'" style="color:#FF0639;font-size:20px;font-weight:bold"><span style="font-size:14px">￥</span>{{ item.card_cost }}</div>
            <div v-else></div> -->
            <div
              style="width: 1.59rem; height: 0.6rem; background: rgb(233, 241, 255); border-radius: 0.4rem; font-size: 0.28rem; color: rgb(0, 90, 255);"
              class="flexcc"
            >
              <div style="cursor: pointer;" @click="fenxianglogs(item)">分享</div>
              <div>
                <img
                  src="../../../static/img/shouye8.png"
                  style="width: 0.3rem; margin-left: 0.1rem;"
                />
              </div>
            </div>
            <div
              @click="go2(item)"
              class="flexcc"
              style="background: rgb(0, 90, 255); width: 4.76rem; height: 0.6rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.3rem; font-size: 0.28rem; color: rgb(255, 255, 255);"
            >
              立即办理<span style="font-size:14px"
              <span
                style="margin-left:5px"
                v-if="item.card_cost != '0.00'"
              >￥{{ item.card_cost }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show3" position="center" style="border-radius: 0.5rem;">
      <div style="padding: 0.6rem 0.3rem; text-align: center;">
        <div style="font-size: 0.36rem; font-weight: bold; margin-bottom: 0.4rem;">联系客服</div>
        <div style="margin-bottom: 0.2rem;" class="flexcc">
          <img
            :src="all.img || 'https://file.91haoka.cn/kefuweishezhi.png'"
            style="width: 3.2rem;"
          />
        </div>
        <div
          style="margin-bottom: 0.2rem; font-size: 0.2rem; color: rgb(120, 119, 119);"
        >长按识别二维码加我为好友</div>
        <div
          style="margin-bottom: 0.2rem; font-size: 0.18rem; color: rgb(178, 177, 177);"
        >非微信环境请截图保存在微信内扫一扫选择相册</div>
        <div
          @click="lianxi"
          v-if="all.cust_url"
          style="background: rgb(0, 90, 255); border-radius: 0.4rem; font-size: 0.28rem; width: 4.5rem; height: 0.8rem; color: #fff; margin-top: 0.3rem; margin-bottom: 0.2rem;"
          class="flexcc"
        >联系客服</div>
        <div
          style="margin-bottom: 0.1rem; font-size: 0.18rem; color: rgb(120, 119, 119);"
        >直接打开微信聊天窗口与我沟通</div>
      </div>
    </van-popup>

    <van-popup v-model="show5" position="center" style="border-radius: 0.5rem;">
      <div style="padding: 0.6rem 0.3rem; text-align: center; width: 6.6rem;">
        <!-- <div v-if="!all.store_poster && this.$route.query.shop_id" class="t_qrcode" ref="qrCodeUrl"></div> -->
        <!--  <div v-if="!all.store_poster && this.$route.query.shop_id">
          <erweimashengcheng></erweimashengcheng>
        </div>-->

        <!-- <div v-if="all.store_poster">
          <img :src="all.store_poster" style="width: 6rem;">
          <div style="margin-top: 0.5rem; font-size: 0.33rem; color: rgb(120, 119, 119);" @click="xiazai">保存</div>
        </div>-->

        <canvas999 ref="canvas999" v-if="show5"></canvas999>
      </div>
    </van-popup>

    <van-popup v-model="fenxiangtulog" style="background: #fff !important; width: 6.5rem;">
      <div>
        <img src="../../../static/img/loginbg.png" />
      </div>
      <div
        style="font-size: 16px; padding: 0.3rem 0 0 0.3rem; font-weight: bold;"
      >{{ xuanzhongde.title }}</div>
      <div class="flex" style="padding:0.3rem;">
        <div id="qrcode"></div>
        <div style="margin-left: 0.3rem;" class="flexcc">
          <div>
            <div style="font-size: 12px;">长按识别二维码 进入下单链接</div>
            <div style="color: rgb(154, 154, 154); margin-top: 0.2rem; font-size: 14px;">正规授权 真实可靠</div>
          </div>
        </div>
      </div>
      <div class="flex" style="justify-content: space-around; margin-top: 30px;">
        <div
          style="width: 98px; height: 42px; font-size: 14px; background: rgb(213, 213, 213);  cursor: pointer; border-radius: 24px;"
          class="flexcc"
          @click="fenxiangtulog = false"
        >关闭</div>
        <div
          style="width: 98px; height: 42px; font-size: 14px; background: rgb(64, 156, 255);  cursor: pointer; color: rgb(255, 255, 255); border-radius: 24px;"
          class="flexcc"
          @click="haibao"
        >下载</div>
      </div>
    </van-popup>

    <van-popup v-model="fenxiangtulog2" style="width: 7.5rem; background: #fff !important;">
      <img :src="img3" style="width: 100%;" />
    </van-popup>
    <poster ref="childRef" :selectObj="selectObj" />

    <van-popup v-model="dishilog" position="bottom">
      <van-picker
        title="选择省份"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import erweimashengcheng from "./erweimashengchengxiazai.vue";
import * as qiniu from "qiniu-js";
import QRCode from "qrcodejs2";
import chuantu from "@/components/chuantu.vue";
import { random } from "lodash";
import footers from "./footers.vue";
import canvas999 from "./zujian/canvas999.vue";
import poster from "./haibao.vue";
export default {
  components: {
    chuantu,
    footers,
    erweimashengcheng,
    poster,
    canvas999
  },
  name: "index",
  data() {
    return {
      selectObj: {},
      show3: false,
      show5: false,
      isshowwind: false,
      all: {
        selling_point: []
      },
      list: [],
      operator: "",

      xuanzhongde: "",
      img2: "",
      fenxiangtulog: false,

      img3: "",
      fenxiangtulog2: false,

      user: "",
      latitude: null, // 纬度
      longitude: null, // 经度

      fenleilist: [],

      hao_province: "全国",
      title: "",
      dishilog: false,
      columns: [
        "全国",
        "北京市",
        "天津市",
        "河北省",
        "山西省",
        "内蒙古自治区",
        "辽宁省",
        "吉林省",
        "黑龙江省",
        "上海市",
        "江苏省",
        "浙江省",
        "安徽省",
        "福建省",
        "广西壮族自治区",
        "山东省",
        "山西省",
        "河南省",
        "湖北省",
        "湖南省",
        "广东省",
        "海南省",
        "重庆市",
        "四川省",
        "贵州省",
        "云南省",
        "西藏自治区",
        "陕西省",
        "甘肃省",
        "青海省",
        "宁夏回族自治区",
        "新疆维吾尔自治区",
        "台湾省",
        "香港特别行政区",
        "澳门特别行政区"
      ]
    };
  },
  created() {
    if (!this.$route.query.shua) {
      if (location.search) {
        location.href = location.href + "&shua=1";
      } else {
        location.href = location.href + "?shua=1";
      }
    }

    axios.get("/agent/auth/user").then(response => {
      if (response.data.msg.code == 0) {
        let yemianid = this.$route.query.shop_id;
        if (this.$route.query.shop_id) {
          yemianid = window.atob(this.$route.query.shop_id);
        }
        if (response.data.data.id != yemianid) {
          location.href =
            location.origin +
            "/h5/index?shop_id=" +
            window.btoa(response.data.data.id);
        }
        this.user = response.data.data;
        localStorage.setItem("user", JSON.stringify(response.data.data));
      } else {
        this.user = "";
      }
    });

    let urlbd = "";

    if (this.$route.query.shop_id) {
      //那就是分销商的店铺
      urlbd =
        "/api/mstore/info?shop_id=" + window.atob(this.$route.query.shop_id);
    } else {
      //有shops_id就是页面
      if (this.$route.query.shops_id) {
        urlbd = `/api/flow/storeinfo?id=${this.$route.query.shops_id}`;
      } else {
        //都没有就是管理员店铺
        urlbd = "/api/mstore/info";
      }
    }

    let bd = new Promise((res, rej) => {
      axios.get(urlbd).then(response => {
        if (response.data.msg.code == 0) {
          this.all = response.data.data;
          res("ok");
        }
      });
    });
    bd.then(() => {
      let p = new Promise((res, rej) => {
        axios.get("/api/category/list?is_all=1&is_shield=1").then(response => {
          if (response.data.msg.code == 0) {
            this.fenleilist = response.data.data;
            // if (this.fenleilist.length > 0 && !this.$route.query.shops_id) {
            //   this.operator = this.fenleilist[0].id;

            // }
            res("ok");
          } else {
            vant.Toast(response.data.msg.info);
          }
        });
      });

      let d = new Promise((res, rej) => {
        if (this.all.belong_type == 1) {
          axios.get("/api/ip-address/get").then(response => {
            if (response.data.msg.code == 0) {
              if (response.data.data.addressComponent.province) {
                this.hao_province =
                  response.data.data.addressComponent.province;
                res("ok");
              }
            } else {
              if (response.data.data.addressComponent.province) {
                this.hao_province = "全国";
                res("ok");
              }
            }
          });
        } else {
          res("ok");
        }
      });
      Promise.all([p, d]).then(() => {
        let url = "";
        let url2 = "";
        if (this.$route.query.shop_id) {
          //那就是分销商的店铺

          url =
            "/api/mstore/info?shop_id=" +
            window.atob(this.$route.query.shop_id);
          url2 = `/api/page/list?shop_id=${window.atob(
            this.$route.query.shop_id
          )}&page=1&page_size=200&hao_province=${this.hao_province}&title=${
            this.title
          }&h5_direct=1`;
        } else {
          //有shops_id就是页面
          if (this.$route.query.shops_id) {
            url = `/api/flow/storeinfo?id=${this.$route.query.shops_id}`;
            url2 = `/api/fpage/list?tab=${this.$route.query.shops_id}&page=1&page_size=200&hao_province=${this.hao_province}&title=${this.title}&h5_direct=1`;
          } else {
            //都没有就是管理员店铺
            url = "/api/mstore/info";
            url2 = `/api/page/list?page=1&page_size=200&hao_province=${this.hao_province}&title=${this.title}&h5_direct=1`;
          }
        }

        this.getinfo(url);
        this.getlist(url2);
      });
    });
  },
  mounted() {

    if(location.hostname == 'ka.mayixh.com'){
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?5b8592c3afcb4ac8cf8897c6301c17e1";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    }



    //pc端用
    if (window.screen.width > 1080) {
      this.dayu = true;

      var h = 500 / 7.5 + "px";
      document.documentElement.style.fontSize = h;
    }

    document.getElementById("index").addEventListener("scroll", () => {
      localStorage.setItem(
        "scrollTop",
        document.getElementById("index").scrollTop
      );
    });

    this.backtop();
  },
  methods: {
    getinfo: function(url) {
      var that = this;
      axios.get(url).then(response => {
        if (response.data.msg.code == 0) {
          this.all = response.data.data;
          if (this.all.json) {
            this.all.json = JSON.parse(this.all.json);
          }

          localStorage.setItem(
            "store_title",
            this.all.store_title || this.all.store_name
          );

          document.title = this.all.store_title || this.all.store_name;

          //微信分享
          var ua = window.navigator.userAgent.toLowerCase();
          if (ua.match(/micromessenger/i) == "micromessenger") {
            axios
              .post("/api/wechat/share", { url: location.href })
              .then(response2 => {
                if (response2.data.msg.code == 0) {
                  wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: response2.data.data.appId, // 必填，公众号的唯一标识
                    timestamp: response2.data.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: response2.data.data.nonceStr, // 必填，生成签名的随机串
                    signature: response2.data.data.signature, // 必填，签名
                    jsApiList: [
                      "updateAppMessageShareData",
                      "updateTimelineShareData"
                    ] // 必填，需要使用的JS接口列表
                  });

                  setTimeout(() => {
                    wx.ready(function() {
                      //需在用户可能点击分享按钮前就先调用
                      wx.updateAppMessageShareData({
                        title: that.all.store_name, // 分享标题
                        desc: that.all.store_slogan, // 分享描述
                        link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: that.all.top_pic, // 分享图标
                        success: function() {}
                      });
                      wx.updateTimelineShareData({
                        title: that.all.store_name, // 分享标题
                        link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: that.all.top_pic, // 分享图标
                        success: function() {}
                      });
                    });
                  }, 500);
                } else {
                }
              });
          }
        }
      });
    },

    onConfirm: function(val) {
      console.log(val);
      this.hao_province = val;
      this.dishilog = false;
    },
    onCancel: function() {
      this.dishilog = false;
    },
    //跳转到h5首页
    switchClick: function() {
      location.href = `${location.origin}/web/index?open=1`;
      // location.href = `http://localhost:8080/web/index?open=1`;
    },
    backtop: function() {
      this.$router.beforeEach((to, from, next) => {
        next();
        if (from.path == "/order" && to.path == "/index") {
          this.$nextTick(() => {
            document
              .getElementById("index")
              .scroll(0, localStorage.getItem("scrollTop"));
          });
        } else {
          axios.get("/agent/auth/user").then(response => {
            if (response.data.msg.code == 0) {
              this.user = response.data.data;
              localStorage.setItem("user", JSON.stringify(response.data.data));
            } else {
              this.user = "";
            }
          });
        }
      });
    },
    go4: function(url) {
      // this.$router.push({
      //   path:url+location.search,
      // })
      if (this.$route.query.shops_id) {
        this.$router.push({
          path: "/jiameng",
          query: {
            shops_id: this.$route.query.shops_id
          }
        });
      } else {
        if (this.$route.query.shop_id) {
          this.$router.push({
            path: "/jiameng",
            query: {
              shop_id: this.$route.query.shop_id
            }
          });
        } else {
          this.$router.push({
            path: "/jiameng"
          });
        }
      }

      // this.$router.push({
      //   path:'/jiameng',
      //   query:{
      //     id:item.id,
      //     shop_id:this.$route.query.shop_id
      //   }
      // })
    },
    go3: function(url) {
      window.location.href = url;
    },
    go2: function(item) {
      if (this.$route.query.shops_id) {
        this.$router.push({
          path: "/order",
          query: {
            id: item.id,
            shops_id: this.$route.query.shops_id
          }
        });
      } else {
        this.$router.push({
          path: "/order",
          query: {
            id: item.id,
            shop_id: this.$route.query.shop_id
          }
        });
      }
    },
    fenxianglogs: function(item) {
      this.xuanzhongde = item;
      let erweima = "";
      if (this.$route.query.shops_id) {
        erweima = `${location.origin}/h5/order?id=${this.xuanzhongde.id}&shops_id=${this.$route.query.shops_id}`;
      } else {
        if (this.$route.query.shop_id) {
          erweima = `${location.origin}/h5/order?id=${this.xuanzhongde.id}&shop_id=${this.$route.query.shop_id}`;
        } else {
          erweima = `${location.origin}/h5/order?id=${this.xuanzhongde.id}`;
        }
      }
      let share_img = "";
      if (this.xuanzhongde.share_img) {
        share_img = this.xuanzhongde.share_img;
      } else {
        if (this.xuanzhongde.image1) {
          share_img = this.xuanzhongde.image1;
        }
      }
      this.selectObj = {
        share_img: share_img,
        logo: this.all.left_pic,
        erweima: erweima,
        title: this.xuanzhongde.title,
        shopname: this.all.store_name
      };
      this.$refs.childRef.open();
      // console.log('this.isshowwind=>',this.isshowwind);

      // this.$router.push({
      //   path: "/haibao",
      //   query: {
      //     share_img: share_img,
      //     logo: this.all.left_pic,
      //     erweima: erweima,
      //     title: this.xuanzhongde.title,
      //     shopname: this.all.store_name
      //   }
      // });

      // this.$nextTick(()=>{
      //   let url2 = "https://www.baidu.com"
      //   var d = document.createElement('div')
      //   d.setAttribute('id','erweimadiv')
      //   document.body.appendChild(d)
      //   var qrcode = new QRCode(document.getElementById('erweimadiv'), {
      //       text: url2,
      //       width: 220,
      //       height: 220,
      //       colorDark : "#000000",
      //       colorLight : "#ffffff",
      //       correctLevel : QRCode.CorrectLevel.H
      //   })
      //   var canvas = document.getElementById("erweimadiv").getElementsByTagName("canvas")[0];
      //   this.img2 = canvas.toDataURL("image/png");

      //   this.haibao()
      // })
    },
    haibao: function(item) {
      var that = this;
      var canvas = document.createElement("canvas");
      canvas.width = 750;
      canvas.height = 300;
      var ctx = canvas.getContext("2d");
      var canvas_h = 0;
      var img = new Image();
      let p = new Promise((res, rej) => {
        if (this.xuanzhongde.share_img) {
          img.src = this.xuanzhongde.share_img;
          img.setAttribute("crossOrigin", "Anonymous");
          img.onload = function() {
            let img_w = 750;
            let bili = 750 / img.width;
            let img_h = parseInt(img.height * bili);
            canvas_h = img_h;
            canvas.setAttribute("height", canvas_h + 400);
            ctx.drawImage(img, 0, 0, img_w, img_h); // 将图像绘制到Canvas上
            res("ok");
          };
          img.onerror = function(err) {
            // that.msg = JSON.stringify(err)
          };
        } else {
          res("ok");
        }
      });
      p.then(() => {
        var img2 = new Image();
        img2.src = this.img2;
        img2.setAttribute("crossOrigin", "Anonymous");
        img2.onload = function() {
          ctx.fillStyle = "#000";
          ctx.font = "bold 16px serif";
          ctx.fillText(that.xuanzhongde.title, 30, canvas_h + 30);

          ctx.drawImage(img2, 80, canvas_h + 60, 220, 220);

          ctx.fillStyle = "#000";
          ctx.font = "16px serif";
          ctx.fillText("长按识别二维码 进入下单链接", 80, canvas_h + 310);

          var img22 = new Image();
          img22.src = that.all.top_pic;
          img22.setAttribute("crossOrigin", "Anonymous");
          console.log(img22);
          img22.onload = function() {
            ctx.drawImage(img22, 580, canvas_h + 180, 120, 120);
            var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            for (var i = 0; i < imageData.data.length; i += 4) {
              if (imageData.data[i + 3] == 0) {
                imageData.data[i] = 255;
                imageData.data[i + 1] = 255;
                imageData.data[i + 2] = 255;
                imageData.data[i + 3] = 255;
              }
            }
            ctx.putImageData(imageData, 0, 0);
            var url = canvas.toDataURL("image/png");
            that.img3 = url;
            that.fenxiangtulog2 = true;
            var addElement = document.createElement("a");
            addElement.href = url;
            addElement.download = "海报.png";
            document.body.appendChild(addElement);
            addElement.click();
            document.body.removeChild(addElement);
          };
        };
      });
    },
    lianxi: function() {
      window.location.href = this.all.cust_url;
    },
    xiazai: function() {
      var a = document.createElement("a");
      a.download = "海报"; //这边是文件名，可以自定义
      a.href = this.all.store_poster + "?attname=";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    creatQrCode(url) {
      this.$refs.qrCodeUrl.innerHTML = "";
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: url, // 需要转换为二维码的内容
        // width: 310,
        // height: 310,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
    },
    search: function(val) {
      let op = `&category_id=${this.operator}`;
      if (val) {
        this.operator = val;
        if (val == 99999) {
          this.operator = "";
        }
        op = `&operator=${this.operator}`;
      }

      let url2 = "";
      if (this.$route.query.shop_id) {
        //那就是分销商的店铺
        url2 = `/api/page/list?shop_id=${window.atob(
          this.$route.query.shop_id
        )}&page=1&page_size=200${op}&hao_province=${this.hao_province}&title=${
          this.title
        }`;
      } else {
        //有shops_id就是页面
        if (this.$route.query.shops_id) {
          url2 = `/api/fpage/list?tab=${this.$route.query.shops_id}&page=1&page_size=200${op}&hao_province=${this.hao_province}&title=${this.title}`;
        } else {
          //都没有就是管理员店铺
          url2 = `/api/page/list?page=1&page_size=200${op}&hao_province=${this.hao_province}&title=${this.title}`;
        }
      }
      this.getlist(url2);
    },
    search2: function() {
      let url2 = "";
      if (this.$route.query.shop_id) {
        url2 = `/api/page/list?shop_id=${window.atob(
          this.$route.query.shop_id
        )}&page=1&page_size=200&category_id=${this.operator}&hao_province=${
          this.hao_province
        }&title=${this.title}&h5_direct=0`;
      } else {
        if (this.$route.query.shops_id) {
          url2 = `/api/fpage/list?tab=${this.$route.query.shops_id}&page=1&page_size=200&category_id=${this.operator}&hao_province=${this.hao_province}&title=${this.title}&h5_direct=0`;
        } else {
          url2 = `/api/page/list?page=1&page_size=200&category_id=${this.operator}&hao_province=${this.hao_province}&title=${this.title}&h5_direct=0`;
        }
      }
      this.getlist(url2);
    },

    getimg: function(item) {
      this.all.top_pic = item;
    },

    getlist: function(url2) {
      console.log(this.hao_province);
      console.log(url2);
      axios.get(url2).then(response => {
        if (response.data.msg.code == 0) {
          response.data.data.data.forEach(item => {
            item.yuyin = parseFloat(item.yuyin);
            if (item.selling_point) {
              item.selling_point = JSON.parse(item.selling_point);
            } else {
              item.selling_point = [];
            }
            if (item.image1) {
              item.image2 = item.image1 + "?imageView2/1/w/1000";
            }
          });
          this.list = response.data.data.data;

          if (response.data.data.is_null == 1) {
            this.hao_province = "全国";
          }
        } else {
          vant.Toast(response.data.msg.info);
        }
      });
    },
    showewm() {
      this.show5 = true;
      // if(this.$route.query.shop_id){

      //   setTimeout(()=>{

      //     this.creatQrCode(window.location.href)

      //   },200)
      // }
    }
  }
};
</script>

<style scoped>
/deep/ .van-tabs__nav {
  padding-bottom: 0;
}
/deep/ .van-tabs--line .van-tabs__wrap {
  height: auto;
}
.swicth_img {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 60%;
  right: 0.25rem;
  z-index: 99;
}
.t_qrcode {
  width: 100%;
}
/deep/.t_qrcode img {
  width: 100% !important;
}
</style>
<style scoped lang="less">
/deep/ .van-tab {
  background: rgb(227, 232, 241);
  flex-shrink: 0;
  border-radius: 0.3rem;
  padding: 0 0.3rem;
  margin-right: 0.3rem;
  height: 0.6rem;
  font-size: 0.28rem;
}
/deep/ .van-tabs__nav {
  background: transparent;
}
/deep/ .van-tab--active {
  background: rgb(0, 90, 255) !important;
  color: #fff;
}
/deep/ .van-tabs__line {
  display: none;
}
/deep/ .el-dialog {
  background: rgb(246, 248, 251);
  border-radius: 29px;
}
.xianshi {
  background: rgb(64, 156, 255) !important;
  color: #fff !important;
}
.act {
  background: rgb(0, 90, 255) !important;
  color: #fff;
}

.qrCodeUrl {
  width: 6rem;
  img {
    width: 6rem;
  }
}

.nax::-webkit-scrollbar {
  display: none;
}
.pattern{
  border-top: 1px solid #F7F7F7;
  padding-top: 10px;
}
</style>
